<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换非替换元素的伪元素区别</title>
    <style>
        img{
            position: relative;
        }
        img:after{
            content: attr(alt);
            position: absolute;bottom: 0;
            background-color: rgba(0,0,0,0.5);
            transform: translateY(100%);
            transition: transform .2s;
        }
        img:hover:after{
            transform: translateY(0);
        }
    </style>
</head>
<body>
<img alt="我喜欢你呀" src="80页之前代码测试/0.jpg"/>
</body>
</html>